﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/home/home.css" rel="stylesheet" />

    <script src="/Scripts/jquery-1.8.1.js"></script>
    <script src="../../lib/underscore.js"></script>
    <script src="/js/SQLite3.js"></script>
    <script src="/js/Structures/FolioFixer_DataTypes.js"></script>
    <script src="/js/Data%20Access/FolioFixer_DataSources.js"></script>
    <script src="/js/Data%20Access/ResourceManager.js"></script>
    <script src="/pages/home/home.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Stock City</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>To get started, please select a portfolio, or create a new one.</p>
            <div id="portfolioItemTemplate" data-win-control="WinJS.Binding.Template">
                <div class="listitem">
                    <h4 data-win-bind="innerText: name"></h4>

                    <h6 data-win-bind="innerText: date"></h6>
                </div>
            </div>
            <div id="portfolioList" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource : FolioFixer.Home.PortfolioSource, itemTemplate : select('#portfolioItemTemplate'), layout: {type: WinJS.UI.GridLayout}}" />
        </section>
    </div>

    <div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
        <button id="addButton" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add item'}"></button>
        <button id="dowButton" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'dowAdd',label:'Add DOW Industrial Profile',icon:'add',section:'global',tooltip:'Add portfolio of assets selected from the DOW Industrial Average 30'}"></button>
    </div>

    <div id="addPortfolioFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Add portfolio flyout}">
            <h3>Add Portfolio</h3>
            <label for="portfolioNameInput">Name: </label><input id="portfolioNameInput" type="text" />
            <br />
            <label for="startdatepicker">Start Date: </label><div id="startDatePicker" data-win-control="WinJS.UI.DatePicker" data-win-options="{ current : '1/1/2012' }"></div>
            <br />
            <button id="confirmPortfolio" type="submit" >Confirm</button>
    </div>

    <div id="addDowPortfolioFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Add portfolio flyout}">
        <h3>Add DOW Portfolio</h3>
        <label for="dowfolioNameInput">Name: </label><input id="dowfolioNameInput" type="text" />
        <br />
        <label for="numAssets">Select top: </label>
        <select id="numAssets">
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="15">15</option>
            <option value="20">20</option>
            <option value="25">25</option>
            <option value="30">30</option>
        </select>
        <br />
        <label for="selection">Query for: </label>
        <select id="selection">
            <option value="j1">Market Capitalization</option>
            <option value="y">Divided Yield</option>
            <option value="r">P/E Ratio</option>
            <option value="r5">PEG Ratio</option>
            <option value="m8">% Change from 50-day Moving Average</option>
            <option value="m6">% Change from 200-day Moving Average</option>
        </select>
        <br />
        <label for="dowDatePicker">Start Date: </label><div id="dowDatePicker" data-win-control="WinJS.UI.DatePicker" data-win-options="{ current: '1/1/2012' }"></div>
        <br />
        <button id="dowfirmPortfolio" type="submit" >Confirm</button>
    </div>
</body>
</html>
